<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList — 千锋教育版权所有</title>
    <link rel="stylesheet" href="./assets/css/style.css" />
</head>

<body>
    <header>
        <section>
            <form>
                <label for="title">
                    <img
                        src="https://storage.lynnn.cn/assets/markdown/91147/pictures/2021/04/619cd39e955cea7c6718d38afd084162002a1dab.jpeg?sign=f3720165756a2ba0971a4298d71e755e&t=6077acca" />
                </label>
                <input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
                    autocomplete="off" />
            </form>
        </section>
    </header>
    <section class="sec">
        <h2>正在进行 <span id="todocount">3</span></h2>
        <ol id="todolist" class="demo-box">
            <!-- js渲染 -->
        </ol>
        <h2>已经完成 <span id="donecount">2</span></h2>
        <ul id="donelist">
            <li>
                <input type="checkbox" checked="checked" />
                <p>喝酒</p>
                <a href="javascript:;">-</a>
            </li>
            <li>
                <input type="checkbox" checked="checked" />
                <p>蹦迪</p>
                <a href="javascript:;">-</a>
            </li>
        </ul>
    </section>
    <footer>
        <p>
            Copyright &copy; 2021 千锋教育 版权所有
            <a href="javascript:;">京ICP备15058198号</a>
        </p>
        <p>
            您当前的ip地址是：<strong id="ipv4">106.38.62.154</strong>，地理位置：<strong id="addr">北京市 电信互联网数据交换中心</strong>
        </p>
    </footer>
    <!-- <script src="./assets/js/utils.js"></script> -->
    <!-- <script src="https://api.i-lynn.cn/getlplnfo"></script> -->
    <script src="./assets/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./assets/js/index.js"></script>
    <script>
        const title = document.querySelector('#title')
        const todolist = document.querySelector('#todolist')
        const donelist = document.querySelector('#donelist')
        title.onkeydown = function (e) {
            console.log(e)
            let keycode = e.keyCode || e.which
            if (keycode === 13) {
                let li = document.createElement('li')
                todolist.appendChild(li)
                let input = document.createElement('input')
                input.type = 'checkbox'
                li.appendChild(input)
                let p = document.createElement('p')
                p.innerText = this.value
                li.appendChild(p)
                let a = document.createElement('a')
                a.innerText = '-'
                a.setAttribute('href', 'javascript:;')
                li.appendChild(a)
                this.value = ''
                count()
            }
        }
        click(todolist, donelist)
        click(donelist, todolist)
        function click(ele, targetNode) {
            ele.onclick = function (e) {

                if (e.target.tagName === 'INPUT' && e.target.getAttribute('type') === 'checkbox') {
                    targetNode.appendChild(e.target.parentElement)
                    count()
                } else if (e.target.tagName === 'P') {
                    let str = '<input type="text" value="' + e.target.innerText + '">'
                    e.target.innerHTML = str
                    e.target.firstElementChild.onblur = function () {
                        e.target.innerText = this.value
                    }
                } else if (e.target.tagName === 'A') {
                    if (confirm('你确定要残忍删除吗？')) {
                        e.target.parentElement.parentElement.removeChild(e.target.parentElement)
                        count()
                    }
                }
            }
        }
        function count() {
            document.querySelector('#todocount').innerText = todolist.children.length
            document.querySelector('#donecount').innerText = donelist.children.length
        }
    </script>
</body>

</html>